<script setup lang="ts">
import Message from './components/message/message.vue'
import Order from './components/order/Order.vue';
import { useMessageStore } from './stores/module/message';
import { useOrderStore } from './stores/module/order/order';
const messageStore = useMessageStore()
const orderStore = useOrderStore()
</script>

<template>
  <div class="app">
    <router-view v-slot="{ Component, route }">
      <!-- 当route.meta.keepAlive为true时启用缓存 -->
      <template v-if="route.meta.keepAlive">
        <keep-alive>
          <component :is="Component" :key="route.path" />
        </keep-alive>
      </template>
      <template v-else>
        <component :is="Component" :key="route.path" />
      </template>
    </router-view>

    <!-- 消息组件保持不变 -->
    <div class="mes_box tip_box" v-if="messageStore.showMessage">
      <Message />
    </div>
    <div class="order_box tip_box" v-if="orderStore.isShow">
      <Order />
    </div>
  </div>
</template>

<style scoped>
.app {
  width: 100%;
  min-width: 1180px;
  position: relative;

  /* overflow-y: hidden; */
  .tip_box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
  }
}
</style>
